  <<template>
    <div class="h-panel-body" style="background:white">
    <Row :space="20" type="flex">
      <Cell :flex='1'>
        <Select :datas="selectOptions" @change="selectChange"></Select>
      </Cell>
      <Cell>
        <Button color="yellow" @click="deleteTemplate">删除</Button>
        <Button color="green" @click="addModal = true">添加模板</Button>
      </Cell>
    </Row>
    <Row :space="20">
      <Cell width="24">
        <textarea v-model="content" rows="4" style="width:100%" />
      </Cell>
    </Row>
    <Row :space="20">
      <Cell width="12">
        <textarea v-model="input" rows="30" style="width:100%" />
      </Cell>
      <Cell width="12">
        <textarea v-model="output" rows="30" style="width:100%" />
      </Cell>
    </Row>
    <Row :space="20">
      <Cell width="24">
        <Button :block="true" color="primary" @click="convertHandler">转换</Button>
      </Cell>
    </Row>
    <Modal v-model="addModal" :closeOnMask="false" :hasDivider="true" :hasCloseIcon="true" >
      <div slot="header">增加模板</div>
      <div>
        <Form ref="form">
          <FormItem label="模板名称">
            <input v-model="key" type="text">
          </FormItem>
          <FormItem label="模板内容">
            <textarea v-model="content" style="width:800px;" rows="8" />
          </FormItem>
        </Form>
      </div>
      <div slot="footer">
        <button class="h-btn" @click="addModal = false">取消</button>
        <button class="h-btn h-btn-primary" @click="addTemplate">确定</button>
      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  created() {
    this.getSelectOptions();
  },
  mounted() {
  },
  data() {
    return {
      addModal: false,
      selectOptions: [],
      key: "",
      content: "",
      input: "",
      output: "",
    };
  },
  methods: {
    addTemplate() {
      this.$axios
        .post("/jsonui/addTemplate", { key: this.key, template: this.content })
        .then(res => {
          if (res.data.code == this.$store.state.SUCCESS) {
            this.$Message.success(res.data.msg);
            this.getSelectOptions();
          } else {
            this.$Message.error(res.data.msg);
          }
        }).catch(err => {
          this.$Message.error(err);
        });
    },
    deleteTemplate() {
      this.$axios
        .delete("/jsonui/deleteTemplate/" + this.key, {})
        .then(res => {
          if (res.data.code == this.$store.state.SUCCESS) {
            this.getSelectOptions();
          } else {
            this.$Message.error(res.data.msg);
          }
        }).catch(err => {
          this.$Message.error(err);
        });
    },
    getSelectOptions() {
      this.$axios
        .get("/jsonui/getAll", {})
        .then(res => {
          this.selectOptions = res.data.data;
        }).catch(err => {
          this.$Message.error(err);
        });
    },
    convertHandler() {
      this.$axios
        .post("/jsonui/convertHandler", { input: this.input, templateInput: this.content })
        .then(res => {
          if (res.data.code == this.$store.state.SUCCESS) {
            this.$Message.success(res.data.msg);
            this.output = res.data.data;
          } else {
            this.$Message.error(res.data.msg);
          }
        }).catch(err => {
          this.$Message.error(err);
        });
    },
    selectChange(data) {
      this.key = data.title;
      this.content = data.keyId;
    }
  }
};
</script>
